<template>
  <div style="width:100%">
    <div v-if="isDesigner">
      <el-timeline :reverse="reverse">
        <el-timeline-item
          v-for="(activity, index) in demoList"
          :key="index"
          :timestamp="activity.timestamp">
          {{activity.content}}
        </el-timeline-item>
      </el-timeline>
    </div>
    <el-timeline v-else>
      <el-timeline-item
        v-for="(data, index) in activities"
        :key="index"
        v-bind="$attrs"
        :icon="data.icon"
        :type="data.type"
        :color="data.color"
        :size="data.size"
        :timestamp="data.timestamp"
        :placement="placement">
        <slot :data="data">
          <div>{{data.content}}</div>
        </slot>
        <template slot="dot">
          <div :style="{background: color}" class="timeline_node"></div>
        </template>
      </el-timeline-item>
    </el-timeline>
  </div>
</template>
<script>
export default {
  name: 'timeLine',
  props: {
    // field
    value: '',
    mode: {
      default: "edit", // 编辑模式和 edit， 展示模式 view
    },
    optionTemplate: {
      type: String,
      default: ''
    },
    activities: {
      type: Array,
      default: () => []
    },
    // 时间戳位置 top / bottom
    placement: 'bottom',
    // 节点类型 primary / success / warning / danger / info
    type: null,
    // 节点颜色
    color: null,
    // 节点尺寸 normal / large
    size: 'normal'
  },
  computed: {
    isDesigner(){
      return this.$attrs._source === 'designer'
    },
  },
  data() {
    return {
      demoList: [{
        content: '活动1',
        timestamp: '2023-08-08'
      }, {
        content: '活动2',
        timestamp: '2023-08-08'
      }, {
        content: '活动3',
        timestamp: '2023-08-08'
      }]
    }
  },
  created(){
  },
  watch: {
   
  },
  methods: {
    
  }
}
</script>
<style lang="scss" scoped>
  .timeline_node {
    width: 11px;
    height: 11px;
    border-radius: 4px;
    background-color: blue;
  }
</style>